import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import Banner from './components/banner'
import DeliveryInfo from './components/delivery-info'
import Evaluation from './components/evaluation'
import Recommend from './components/recommend'

import './index.scss'

const detailList = [
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_2.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_3.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_4.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_5.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_6.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_7.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_8.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_9.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_10.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_11.jpg')
  },
  {
      url: require('../../assets/detailImg/recommendImg/attention/list_12.jpg')
  }
]

const recommendGoods = [
  {
      icon: require('../../assets/detailImg/recommendImg/recommend1.png'),
      title: 'XX Mate 40 5G 全网通',
      price: '￥196',
      id: '1'
  },
  {
      icon: require('../../assets/detailImg/recommendImg/recommend2.png'),
      title: 'XX手机 大多数人的选择',
      price: '￥339.98',
      id: '2'
  },
  {
      icon: require('../../assets/detailImg/recommendImg/recommend3.png'),
      title: 'XX Mate 40 Pro 5G 全网通',
      price: '￥188',
      id: '3'
  },
  {
      icon: require('../../assets/detailImg/recommendImg/recommend4.png'),
      title: 'XX Mate 40 5G 全网通',
      price: '￥196',
      id: '4'
  },
  {
      icon: require('../../assets/detailImg/recommendImg/recommend5.png'),
      title: 'XX手机 大多数人的选择',
      price: '￥339.98',
      id: '5'
  },
  {
      icon: require('../../assets/detailImg/recommendImg/recommend6.png'),
      title: 'XX Mate 40 Pro 5G 全网通',
      price: '￥188',
      id: '6'
  }
]

function Detail () {
  const [isCollect, setIsCollect] = useState(false)

  function collectItem (type) {
    Taro.showToast({
      title: type ? '收藏成功' : '取消收藏成功'
    })
    setIsCollect(type)
  }

  function addCart () {
    Taro.showToast({
      title: '成功加入购物车'
    })
  }

  return (
    <View className='container'>
      <View className='detail-messages'>
        <Banner></Banner>
        <DeliveryInfo></DeliveryInfo>
        <Evaluation></Evaluation>
        <Recommend></Recommend>
        {
          detailList.map(item => (
            <Image className='detail-list-item' src={ item.url } mode='aspectFill' />
          ))
        }
      </View>
      <View className="detail-buy">
        <View className="detail-shop-img">
          <View className="detail-buy-com">
            <Image className="detail-shopcart-img" src={ require('../../assets/icons/shop.png') } />
            <Text>店铺</Text>
          </View>
          <View className="detail-buy-com">
            <Image className="detail-shopcart-img" src={ require('../../assets/icons/service.png') } />
            <Text>客服</Text>
          </View>
          <View className="detail-buy-com">
            {
              !isCollect
                ? <Image
                    className="detail-star-img"
                    src={ require('../../assets/icons/stars.png') }
                    onClick={collectItem.bind(null, true)}
                  />
                : <Image
                    className="detail-star-img"
                    src={ require('../../assets/icons/selected_star.png') }
                    onClick={collectItem.bind(null, false)}
                  />
            }
            <Text>收藏</Text>
          </View>
        </View>
        <View className="detail-cart">
          <View className="detail-shopcart-add" onClick={addCart}>
            <Text className='detail-shopcart-button-text'>加入购物车</Text>
          </View>
          <View className="detail-now-buy">
            <Text className='detail-shopcart-button-text'>立即购买</Text>
          </View>
        </View>
      </View>
      <View className="content">
        {recommendGoods.map(item => (
          <View className="content-recommend-box">
            <View className="content-recommend-img-wrapper">
              <Image className="content-recommend-img" src={ item.icon }></Image>
            </View>
            <Text className="content-recommend-good-name">{ item.title }</Text>
            <Text className="content-recommend-price">{ item.price }</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

export default Detail

